<template>
  <Card :title="t('routes.dashboard.taskManagement')" v-bind="$attrs">
    <template #extra>
      <a-button type="link" size="small">{{ t('routes.dashboard.more') }}</a-button>
    </template>
    <Tabs v-model:active-key="activeKey">
      <TabPane key="1" :tab="t('routes.dashboard.notStarted')">
        <List item-layout="horizontal" :data-source="data" :pagination="pagination">
          <template #renderItem="{ item }">
            <ListItem>
              <template #actions>
                <a>{{ t('routes.dashboard.started') }}</a>
                <a>{{ t('routes.dashboard.view') }}</a>
              </template>
              <ListItemMeta>
                <template #title>{{ item.name }}</template>
                <template #description
                  >{{ t('routes.dashboard.project') }}{{ item.toProject }}</template
                >
              </ListItemMeta>
            </ListItem>
          </template>
        </List>
      </TabPane>
      <TabPane key="2" :tab="t('routes.dashboard.inProgress')">
        <List item-layout="horizontal" :data-source="data" :pagination="pagination">
          <template #renderItem="{ item }">
            <ListItem>
              <template #actions>
                <a>{{ t('routes.dashboard.upload') }}</a>
                <a>{{ t('routes.dashboard.view') }}</a>
              </template>
              <ListItemMeta>
                <template #title>{{ item.name }}</template>
                <template #description
                  >{{ t('routes.dashboard.project') }}{{ item.toProject }}</template
                >
              </ListItemMeta>
            </ListItem>
          </template>
        </List>
      </TabPane>
    </Tabs>
  </Card>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { Card, Tabs, TabPane, List, ListItem, ListItemMeta } from 'ant-design-vue';
  import { useI18n } from '/@/hooks/web/useI18n';

  const { t } = useI18n();

  interface DataItem {
    name: string;
    toProject: string;
  }
  const data: DataItem[] = [
    {
      name: '测试任务1',
      toProject: '项目1',
    },
    {
      name: '测试任务2',
      toProject: '项目2',
    },
    {
      name: '测试任务3',
      toProject: '项目3',
    },
  ];
  const pagination = {
    current: 1,
    pageSize: 3,
    total: 4,
    size: 'small',
  };
  const activeKey = ref('1');
</script>

<style lang="less" scoped>
  .demo-loadMore-list {
    min-height: 350px;
  }
</style>
